<template>
  <!-- 职工维权回复 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData :searchData="searchArr" @search="search"></searchData>
    <!-- 表格 -->
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title"></title-name> -->
      <!-- 表格 -->
      <list-table
        ref="table"
        tableLayout="fixed"
        size="default"
        rowKey="id"
        :columns="columns"
        :request="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        showPagination="auto"
      >
        <template slot="action" slot-scope="text, record">
          <a v-btnPermission="'lu_0019_loo_04'" @click="handleManage(0, record)">查看</a>
          <template v-if="record.replyStatus == 0">
            <a-divider v-btnPermission="'lu_0019_rep_05'" type="vertical"></a-divider>
            <a v-btnPermission="'lu_0019_rep_05'" @click="handleManage(1, record)">回复</a>
          </template>
        </template>
        <!-- 回复状态 -->
        <template slot="replyStatus" slot-scope="text, record">
          <span :class="{ alert_text: record.replyStatus == 0 }">{{ ['待回复', '已回复'][record.replyStatus] }}</span>
        </template>
      </list-table>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { workersRightsProtection } from '@/api/union/workersCongress' // api
import BasePage from '@/views/basePage' // 基础配置

const searchArr = [
  // 搜索框
  {
    name: '主题',
    type: 'input',
    value: 'theme',
  },
  {
    name: '填报人',
    type: 'input',
    value: 'creator',
  },
  {
    name: '填报时间',
    type: 'dateRange',
    value: 'time',
    attr: {
      rangeFormat: ['startTime', 'endTime'],
    },
  },
  {
    name: '回复状态',
    value: 'replyStatus',
    type: 'select',
    data: [
      {
        value: '0',
        label: '待回复',
      },
      {
        value: '1',
        label: '已回复',
      },
    ],
  },
  {
    name: '回复时间',
    type: 'dateRange',
    value: 'replyTime',
    attr: {
      rangeFormat: ['replyStartTime', 'replyEndTime'],
    },
  },
]
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    },
  },
  {
    title: '主题',
    ellipsis: true,
    dataIndex: 'theme',
  },
  {
    title: '主要内容',
    ellipsis: true,
    dataIndex: 'content',
  },
  {
    title: '填报人',
    ellipsis: true,
    dataIndex: 'creator',
  },
  {
    title: '填报时间',
    ellipsis: true,
    dataIndex: 'createTime',
  },
  {
    title: '回复状态',
    dataIndex: 'replyStatus',
    scopedSlots: { customRender: 'replyStatus' },
  },
  {
    title: '回复时间',
    ellipsis: true,
    dataIndex: 'modifiedTime',
    customRender(text, record) {
      return record.replyStatus == 0 ? '' : text
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
    name:'a'+Date.now(),
  extends: new BasePage(),
  components: {
    STable,
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      queryParam: {}, // 查询参数
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, { query: Object.assign({ status: 2 }, this.queryParam) })
        return workersRightsProtection.getList(requestParameters).then((res) => {
          return res
        })
      }, // 加载数据方法 必须为 Promise 对象
      removeApi: workersRightsProtection, // api
    }
  },
  methods: {
    // 搜索
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    // 操作栏
    handleManage(type, record) {
      let query = {
        editModel: type,
      }
      if (record && record.id) {
        query.id = record.id
      }
      this.$router.push({
        name: '/union/workerProtection/replyEdit',
        query,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.alert_text {
  color: rgb(238, 146, 9);
}
</style>